<template>
	<div>
		<!-- computed:对一个值监听，返回一个新值 -->
		<table border="1">
			<thead>
				<tr>
					<th>名称</th>
					<th>数量</th>
					<th>单价</th>
					<th>总价</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item, index) in list" :key="index">
					<td>{{ item.name }}</td>
					<td>{{ item.count }}</td>
					<td>{{ item.money }}</td>
					<td>{{ item.count * item.money }}</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="4">{{ total }}</td>
				</tr>
			</tfoot>
		</table>
	</div>
</template>

<script>
export default {
  computed:{
    //监听一个值并返回一个值
    total:{
      //把list里的每一条的单价*数量然后累加的值就是总单价
     return this.list.reduce((a,b)=>{
        return a+b.count*b.money
      })
      
    }
  },
	data() {
		return {
			list: [
				{ name: 'iPhone12', count: 1, money: 9000 },
				{ name: '华为meta40', count: 2, money: 7800 },
				{ name: '小米', count: 3, money: 4000 },
			],
		}
	},
}
</script>

<style>
</style>